<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目成员卡片 API 测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            color: #1890ff;
            margin-bottom: 20px;
            border-bottom: 2px solid #1890ff;
            padding-bottom: 10px;
        }
        
        .config-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: bold;
        }
        
        input, select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: #1890ff;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background-color: #1890ff;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #40a9ff;
        }
        
        .btn-secondary {
            background-color: #52c41a;
            color: white;
        }
        
        .btn-secondary:hover {
            background-color: #73d13d;
        }
        
        .btn-danger {
            background-color: #ff4d4f;
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #ff7875;
        }
        
        .result-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .result-section h2 {
            color: #333;
            margin-bottom: 15px;
        }
        
        .result-content {
            background: #fafafa;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            padding: 15px;
            max-height: 500px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        .info {
            background-color: #e6f7ff;
            border: 1px solid #91d5ff;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .info h3 {
            color: #1890ff;
            margin-bottom: 10px;
        }
        
        .info ul {
            margin-left: 20px;
            color: #666;
        }
        
        .info li {
            margin-bottom: 5px;
        }
        
        .loading {
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid #1890ff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .success {
            color: #52c41a;
        }
        
        .error {
            color: #ff4d4f;
        }
        
        .method-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 8px;
            font-weight: bold;
        }
        
        .method-get {
            background-color: #52c41a;
            color: white;
        }
        
        .endpoint {
            background: #f9f9f9;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 项目成员卡片 API 测试工具</h1>
        
        <div class="info">
            <h3>📋 API 接口说明</h3>
            <ul>
                <li>基础 URL：<code>/api/project-member-cards</code></li>
                <li>用于项目成员管理页面的项目卡片列表</li>
                <li>统计合同人员表中的项目成员信息</li>
                <li>需要 Bearer Token 认证</li>
            </ul>
        </div>
        
        <div class="config-section">
            <h2>⚙️ 配置</h2>
            <div class="form-group">
                <label for="baseUrl">后端地址 (Base URL):</label>
                <input type="text" id="baseUrl" value="http://localhost:8087" placeholder="http://localhost:8087">
            </div>
            
            <div class="form-group">
                <label for="token">认证 Token (Bearer Token):</label>
                <input type="text" id="token" placeholder="粘贴你的 token (从浏览器 localStorage 获取)">
                <small style="color: #999;">可以从浏览器开发者工具 -> Application -> Local Storage 中的 token 字段获取</small>
            </div>
            
            <div class="form-group">
                <label for="customerId">客户 ID (可选):</label>
                <input type="number" id="customerId" placeholder="留空表示不筛选">
            </div>
            
            <div class="form-group">
                <label for="contractCompanyId">签约公司 ID (可选):</label>
                <input type="number" id="contractCompanyId" placeholder="留空表示不筛选">
            </div>
            
            <div class="button-group">
                <button class="btn-primary" onclick="testGetAllCards()">获取所有项目成员卡片</button>
                <button class="btn-secondary" onclick="testGetCardsByStatus()">按状态获取</button>
                <button class="btn-secondary" onclick="testGetCardsByCustomer()">按客户获取</button>
                <button class="btn-secondary" onclick="testGetCardsByContractCompany()">按签约公司获取</button>
                <button class="btn-danger" onclick="clearResults()">清空结果</button>
            </div>
        </div>
        
        <div class="result-section">
            <h2>📊 测试结果</h2>
            <div id="result" class="result-content">等待测试...</div>
        </div>
    </div>

    <script>
        const baseUrl = document.getElementById('baseUrl');
        const token = document.getElementById('token');
        const customerId = document.getElementById('customerId');
        const contractCompanyId = document.getElementById('contractCompanyId');
        const resultDiv = document.getElementById('result');
        
        // 显示结果
        function showResult(data, isError = false) {
            const now = new Date().toLocaleString('zh-CN');
            const className = isError ? 'error' : 'success';
            const prefix = isError ? '❌ 错误' : '✅ 成功';
            
            resultDiv.innerHTML = `
                <div style="margin-bottom: 10px; color: #666;">
                    <strong>测试时间：</strong> ${now}
                </div>
                <div class="${className}">
                    ${prefix}<br>
                    ${JSON.stringify(data, null, 2)}
                </div>
            `;
        }
        
        // 显示加载中
        function showLoading(endpoint) {
            resultDiv.innerHTML = `
                <div class="loading"></div>
                正在请求: ${endpoint}
            `;
        }
        
        // 清空结果
        function clearResults() {
            resultDiv.textContent = '等待测试...';
        }
        
        // 获取所有项目成员卡片
        async function testGetAllCards() {
            const endpoint = '/api/project-member-cards';
            showLoading(endpoint);
            
            try {
                const response = await fetch(`${baseUrl.value}${endpoint}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token.value}`
                    }
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    showResult({
                        endpoint: endpoint,
                        method: 'GET',
                        status: response.status,
                        data: data
                    });
                } else {
                    showResult({
                        endpoint: endpoint,
                        method: 'GET',
                        status: response.status,
                        error: data
                    }, true);
                }
            } catch (error) {
                showResult({
                    endpoint: endpoint,
                    method: 'GET',
                    error: error.message
                }, true);
            }
        }
        
        // 按状态获取项目成员卡片
        async function testGetCardsByStatus() {
            const hasInactiveMembers = confirm('是否筛选有已退出成员的项目？\n点击"确定"=有退出成员\n点击"取消"=无退出成员');
            const endpoint = `/api/project-member-cards/status?hasInactiveMembers=${hasInactiveMembers}`;
            showLoading(endpoint);
            
            try {
                const response = await fetch(`${baseUrl.value}${endpoint}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token.value}`
                    }
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    showResult({
                        endpoint: endpoint,
                        method: 'GET',
                        status: response.status,
                        data: data
                    });
                } else {
                    showResult({
                        endpoint: endpoint,
                        method: 'GET',
                        status: response.status,
                        error: data
                    }, true);
                }
            } catch (error) {
                showResult({
                    endpoint: endpoint,
                    method: 'GET',
                    error: error.message
                }, true);
            }
        }
        
        // 按客户ID获取项目成员卡片
        async function testGetCardsByCustomer() {
            const id = customerId.value;
            if (!id) {
                alert('请先输入客户 ID');
                return;
            }
            
            const endpoint = `/api/project-member-cards/customer/${id}`;
            showLoading(endpoint);
            
            try {
                const response = await fetch(`${baseUrl.value}${endpoint}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token.value}`
                    }
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    showResult({
                        endpoint: endpoint,
                        method: 'GET',
                        status: response.status,
                        data: data
                    });
                } else {
                    showResult({
                        endpoint: endpoint,
                        method: 'GET',
                        status: response.status,
                        error: data
                    }, true);
                }
            } catch (error) {
                showResult({
                    endpoint: endpoint,
                    method: 'GET',
                    error: error.message
                }, true);
            }
        }
        
        // 按签约公司ID获取项目成员卡片
        async function testGetCardsByContractCompany() {
            const id = contractCompanyId.value;
            if (!id) {
                alert('请先输入签约公司 ID');
                return;
            }
            
            const endpoint = `/api/project-member-cards/contract-company/${id}`;
            showLoading(endpoint);
            
            try {
                const response = await fetch(`${baseUrl.value}${endpoint}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token.value}`
                    }
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    showResult({
                        endpoint: endpoint,
                        method: 'GET',
                        status: response.status,
                        data: data
                    });
                } else {
                    showResult({
                        endpoint: endpoint,
                        method: 'GET',
                        status: response.status,
                        error: data
                    }, true);
                }
            } catch (error) {
                showResult({
                    endpoint: endpoint,
                    method: 'GET',
                    error: error.message
                }, true);
            }
        }
        
        // 页面加载完成后提示
        window.onload = function() {
            console.log('项目成员卡片 API 测试工具已加载');
            console.log('请确保后端服务已启动，并且已经登录获取 token');
        };
    </script>
</body>
</html>
